<template>
  <div class="II-III-I">
    <table class="II-III-I__table">
      <tr class="II-III-I__table-trone">
        <td class="II-III-I__table-trone-td"
            colspan="7">
          <div class="II-III-I__table-trone-td-title">
            II-3 支撑平台与重大仪器设备
          </div>
        </td>
      </tr>
      <tr class="II-III-I__table-trtwo">
        <td class="II-III-I__table-trtwo-td"
            colspan="7">
          <div class="II-III-I__table-trtwo-td-title">
            II-3-1 支撑平台
          </div>
        </td>
      </tr>
      <tr class="II-III-I__table-trthree">
        <td class="II-III-I__table-trthree-td"
            colspan="7">
          <div class="II-III-I__table-trthree-td-title">
            （一）国家级平台
          </div>
        </td>
      </tr>
      <tr class="II-III-I__table-th">
        <td class="II-III-I__table-th-tdone">
          序号
        </td>
        <td class="II-III-I__table-th-tdtwo">
          平台类别
        </td>
        <td class="II-III-I__table-th-tdthree">
          平台名称
        </td>
        <td class="II-III-I__table-th-tdfour">
          批准<br>年度
        </td>
        <td class="II-III-I__table-th-tdfive">
          参与单<br>位情况
        </td>
        <td class="II-III-I__table-th-tdsix">
          参与学<br>科情况
        </td>
        <td class="II-III-I__table-th-tdseven">
          评估<br>情况
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="II-III-I__table-th-add-button"
                   circle
                   @click.prevent="addGuojiaList"/>
      </tr>
      <tr v-for="(item, index) in bca.countryPlats"
          :key="index + 'guo'"
          class="II-III-I__table-tr">
        <td class="II-III-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="II-III-I__table-tr-tdtwo">
          <el-select v-model="item.categoty"
                     class="II-III-I__table-tr-tdtwo-select"
                     placeholder="请选择">
            <el-option v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="II-III-I__table-tr-tdthree">
          <el-input v-model="item.name"
                    class="II-III-I__table-tr-tdthree-input"
                    autosize
                    placeholder="XX国家重点实验室"
                    \:maxlength="30"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table-tr-tdfour">
          <el-input v-model="item.approvalYear"
                    class="II-III-I__table-tr-tdfour-input"
                    placeholder="1991"
                    :maxlength="4"
                    type="number"/>
        </td>
        <td class="II-III-I__table-tr-tdfive">
          <el-input v-model="item.partDeptInfo"
                    class="II-III-I__table-tr-tdfive-input"
                    placeholder="1(1)"
                    autosize
                    type="textarea"/>
        </td>
        <td class="II-III-I__table-tr-tdsix">
          <el-input v-model="item.partScienceInfo"
                    class="II-III-I__table-tr-tdsix-input"
                    autosize
                    placeholder="1(100%)"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table-tr-tdseven">
          <el-input v-model="item.assessment"
                    class="II-III-I__table-tr-tdseven-input"
                    autosize
                    placeholder="优秀"
                    :maxlength="4"
                    type="textarea"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="II-III-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteGuojiaItem(index)"/>
      </tr>
      <tr class="II-III-I__table-trthree">
        <td class="II-III-I__table-trthree-td"
            colspan="8">
          <div class="II-III-I__table-trthree-td-title">
            （二）教育部平台、国防重点学科实验室
          </div>
        </td>
      </tr>
      <tr class="II-III-I__table-th">
        <td class="II-III-I__table-th-tdone">
          序号
        </td>
        <td class="II-III-I__table-th-tdtwo">
          平台类别
        </td>
        <td class="II-III-I__table-th-tdthree">
          平台名称
        </td>
        <td class="II-III-I__table-th-tdfour">
          批准<br>年度
        </td>
        <td class="II-III-I__table-th-tdfive">
          参与单<br>位情况
        </td>
        <td class="II-III-I__table-th-tdsix">
          参与学<br>科情况
        </td>
        <td class="II-III-I__table-th-tdseven">
          情况<br>评估
        </td>

        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="II-III-I__table-th-add-button"
                   circle
                   @click.prevent="addOtherList"/>
      </tr>
      <tr v-for="(item, index) in bca.eduPlats"
          :key="index + 'other'"
          class="II-III-I__table-tr">
        <td class="II-III-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="II-III-I__table-tr-tdtwo">
          <el-select v-model="item.categoty"
                     class="II-III-I__table-tr-tdtwo-select"
                     placeholder="请选择">
            <el-option v-for="item in options2"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="II-III-I__table-tr-tdthree">
          <el-input v-model="item.name"
                    class="II-III-I__table-tr-tdthree-input"
                    autosize
                    placeholder="XXX教育部重点实验室"
                    :maxlength="30"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table-tr-tdfour">
          <el-input v-model="item.approvalYear"
                    class="II-III-I__table-tr-tdfour-input"
                    placeholder="2008"
                    type="number"/>
        </td>
        <td class="II-III-I__table-tr-tdfive">
          <el-input v-model="item.partDeptInfo"
                    class="II-III-I__table-tr-tdfive-input"
                    autosize
                    placeholder="1(1)"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table-tr-tdsix">
          <el-input v-model="item.partScienceInfo"
                    class="II-III-I__table-tr-tdsix-input"
                    autosize
                    placeholder="1(100%)"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table-tr-tdseven">
          <el-input v-model="item.assessment"
                    class="II-III-I__table-tr-tdseven-input"
                    autosize
                    placeholder="合格"
                    :maxlength="4"
                    type="textarea"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="II-III-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteOtherItem(index)"/>
      </tr>
    </table>
    <table class="II-III-I__table3">
      <tr class="II-III-I__table3-trthree">
        <td class="II-III-I__table3-trthree-td"
            colspan="8">
          <div class="II-III-I__table3-trthree-td-title">
            （三）其他代表性科研奖励
            <span class="II-III-I__table3-trthree-td-title-tips">
              （限5项）
            </span>
          </div>
        </td>
      </tr>
      <tr class="II-III-I__table3-th">
        <td class="II-III-I__table3-th-tdone">
          序号
        </td>
        <td class="II-III-I__table3-th-tdtwo">
          平台类别
        </td>
        <td class="II-III-I__table3-th-tdthree">
          平台名称
        </td>
        <td class="II-III-I__table3-th-tdfour">
          批准部门
        </td>
        <td class="II-III-I__table3-th-tdfive">
          批准<br>年度
        </td>
        <td class="II-III-I__table3-th-tdsix">
          参与单<br>位情况
        </td>
        <td class="II-III-I__table3-th-tdseven">
          参与学<br>科情况
        </td>
        <td class="II-III-I__table3-th-tdeight">
          情况<br>评估
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="II-III-I__table3-th-add-button"
                   circle
                   @click.prevent="addThreeList"/>
      </tr>
      <tr v-for="(item, index) in bca.otherInfos"
          :key="index + 'three'"
          class="II-III-I__table3-tr">
        <td class="II-III-I__table3-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="II-III-I__table3-tr-tdtwo">
          <el-input v-model="item.categoty"
                    class="II-III-I__table3-tr-tdtwo-input"
                    autosize
                    :maxlength="30"
                    placeholder="省部级重点实验室"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table3-tr-tdthree">
          <el-input v-model="item.name"
                    class="II-III-I__table3-tr-tdthree-input"
                    autosize
                    placeholder="XXX省级平台"
                    :maxlength="30"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table3-tr-tdfour">
          <el-input v-model="item.approvalDept"
                    class="II-III-I__table3-tr-tdfour-input"
                    autosize
                    placeholder="XX省教育厅"
                    :maxlength="30"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table3-tr-tdfive">
          <el-input v-model="item.approvalYear"
                    class="II-III-I__table3-tr-tdfive-input"
                    placeholder="2016"
                    type="number"/>
        </td>
        <td class="II-III-I__table3-tr-tdsix">
          <el-input v-model="item.partDeptInfo"
                    class="II-III-I__table3-tr-tdsix-input"
                    autosize
                    placeholder="1(1)"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table3-tr-tdseven">
          <el-input v-model="item.partScienceInfo"
                    class="II-III-I__table3-tr-tdseven-input"
                    autosize
                    placeholder="1(100%)"
                    type="textarea"/>
        </td>
        <td class="II-III-I__table3-tr-tdeight">
          <el-input v-model="item.assessment"
                    class="II-III-I__table3-tr-tdeight-input"
                    autosize
                    placeholder="未评估"
                    :maxlength="4"
                    type="textarea"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="II-III-I__table3-tr-delete-button"
                   circle
                   @click.prevent="deleteThreeItem(index)"/>
      </tr>
    </table>
    <div class="II-III-I__explain">
      <span class="II-III-I__explain-strong">
        说明：①
      </span>
      本表填写2020年12月31日前获批的支撑平台，文件中列出的各“依托单位/组建单位/所属单位/承建单位”均可填写；同一实验室、基地、中心有多重冠名的，只填写一次。
      <span class="II-III-I__explain-strong">
        ②
      </span>
      表（一）限填“国家重大科技基础设施、国家研究中心、前沿科学中心、集成攻关大平台、国家重点实验室、2011协同创新中心（不含省部共建协同创新中心）、国防科技重点实验室；国家技术创新中心、省部共建国家重点实验室、国家工程技术研究中心、国家工程研究中心、国家工程实验室、国家地方联合工程研究中心（实验室）、国家国际科技合作基地、国家科技资源共享服务平台、国家野外科学观测研究站、国家级实验教学示范中心、国家级虚拟仿真实验教学中心、国家教材建设重点研究基地”。
      <span class="II-III-I__explain-strong">
        ③
      </span>
      表（二）限填“教育部重点实验室、教育部工程研究中心、省部共建协同创新中心、教育部国际合作联合实验室、国防重点学科实验室、高等学校学科创新引智基地、教育部野外科学观测研究站”。
      <span class="II-III-I__explain-strong">
        ④
      </span>
      表（三）中填写5项其他代表性支撑平台（如省部级重点实验室、基地、中心）。⑤“评估情况”填写平台管理部门最近组织的一次评估结果（评估时间不限于评估期内，未开展的填写“未评估”）。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    bca: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.bca = await getPageData('bca')
    loading.close()
  },
  data () {
    return {
      options1: [
        { value: '0', label: '国家重大科技基础设施' },
        { value: '1', label: '国家研究中心' },
        { value: '2', label: '前沿科学中心' },
        { value: '3', label: '集成攻关大平台' },
        { value: '4', label: '国家重点实验室' },
        { value: '5', label: '2011协同创新中心' },
        { value: '6', label: '国防科技重点实验室' },
        { value: '7', label: '国家技术创新中心' },
        { value: '8', label: '省部共建国家重点实验室' },
        { value: '9', label: '国家工程技术研究中心' },
        { value: '10', label: '国家工程研究中心' },
        { value: '11', label: '国家工程实验室' },
        { value: '12', label: '国家地方联合工程研究中心' },
        { value: '13', label: '国家地方联合工程实验室' },
        { value: '14', label: '国家国际科技合作基地' },
        { value: '15', label: '国家科技资源共享服务平台' },
        { value: '16', label: '国家野外科学观测研究站' },
        { value: '17', label: '国家级实验教学示范中心' },
        { value: '18', label: '国家级虚拟仿真实验教学中心' },
        { value: '19', label: '国家教材建设重点研究基地' }],
      options2: [
        { value: '0', label: '教育部重点实验室' },
        { value: '1', label: '教育部工程研究中心' },
        { value: '2', label: '省部共建协同创新中心' },
        { value: '3', label: '教育部国际合作联合实验室' },
        { value: '4', label: '国防重点学科实验室' },
        { value: '5', label: '高等学校学科创新引智基地' },
        { value: '6', label: '教育部野外科学观测研究站' }],
      bca: {
        countryPlats: [{ categoty: '', name: '', approvalYear: '', partDeptInfo: '', partScienceInfo: '', assessment: '' }],
        eduPlats: [{ categoty: '', name: '', approvalYear: '', partDeptInfo: '', partScienceInfo: '', assessment: '' }],
        otherInfos: [{ categoty: '', name: '', approvalDept: '', approvalYear: '', partDeptInfo: '', partScienceInfo: '', assessment: '' }]
      }
    }
  },
  methods: {
    addGuojiaList () {
      this.bca.countryPlats.push({ categoty: '', name: '', approvalYear: '', partDeptInfo: '', partScienceInfo: '', assessment: '' })
    },
    deleteGuojiaItem (index) {
      if (this.bca.countryPlats.length > 1) {
        this.bca.countryPlats.splice(index, 1)
      }
    },
    addOtherList () {
      this.bca.eduPlats.push({ categoty: '', name: '', approvalYear: '', partDeptInfo: '', partScienceInfo: '', assessment: '' })
    },
    deleteOtherItem (index) {
      if (this.bca.eduPlats.length > 1) {
        this.bca.eduPlats.splice(index, 1)
      }
    },
    addThreeList () {
      if (this.bca.otherInfos.length < 5) {
        this.bca.otherInfos.push({ type: '', name: '', approvalDept: '', approvalYear: '', partDeptInfo: '', partScienceInfo: '', assessment: '' })
      }
    },
    deleteThreeItem (index) {
      if (this.bca.otherInfos.length > 1) {
        this.bca.otherInfos.splice(index, 1)
      }
    }
  }
}
</script>

// <style lang="less" scoped>
 @import '../../assets/css/page/2-3-1.less';
 </style>
